<template>
   
  <div id="app">
    <h2>热销</h2>
    <div class="tabs">
      <!-- 父组件向子组件传值: 父组件在子组件身上通过自定义属性传值,子组件内部通过props接收值 -->
      <!-- 子组件向父组件传值: 父组件提前在子组件身上绑定自定义事件,子组件内部通过$emit触发事件并传值 -->
      <!-- 渲染左侧分类 -->
      <TabLeft :tabs="tabs" :currentIndex="currentIndex" @deliverIndex="changelist" />
      
      <!-- 渲染右侧列表 -->
      <TabRight :tabs="tabs" :currentIndex="currentIndex" />
    </div>
  </div>
</template>

<script>

//导入本地图片
import pic1 from './assets/pic1.jpg';
import pic2 from './assets/pic2.png';
import pic3 from './assets/pic3.png';
import pic4 from './assets/pic4.jpg';


//导入组件
import TabLeft from './components/TabLeft.vue'
import TabRight from './components/TabRight.vue'

export default {
  data(){
    return {
      currentIndex:0, //用来保存当前点击的分类下标
      tabs:[
        {  //一个对象是一个分类
          tabName:'三文鱼',
          list:[
            {pic:pic1,name:'三文鱼',price:45},
            {pic:pic1,name:'高级三文鱼',price:55},
            {pic:pic1,name:'vip三文鱼',price:65},

          ]
        },
        {  //一个对象是一个分类
          tabName:'刺身',
          list:[
            {pic:pic2,name:'刺身',price:45},
            {pic:pic2,name:'高级刺身',price:55},
            {pic:pic2,name:'vip刺身',price:65},
          ]
        },
        {  //一个对象是一个分类
          tabName:'大虾',
          list:[
            {pic:pic3,name:'大虾',price:45},
            {pic:pic3,name:'高级大虾',price:55},
            {pic:pic3,name:'vip大虾',price:65},
          ]
        },
           {  //一个对象是一个分类
          tabName:'汉堡',
          list:[
            {pic:pic4,name:'汉堡包',price:30},
            {pic:pic4,name:'套餐汉堡',price:40},
            {pic:pic4,name:'超级套餐汉堡',price:68},
          ]
        },
      ]
    }
  },
  components:{
    TabLeft,
    TabRight
  },
  methods:{
    changelist(index){
      this.currentIndex = index;
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs{
  display: flex;
}


</style>
